import { Meta, Story, Canvas, Props } from "@storybook/blocks";

import { ViewPort, Experimental, Layer, Centered, Positioned } from "../../";
import { blue, red } from "../Utils";
import { CommonHeader, description, PropsTable, Prop } from "../Utils";
import * as LayerStories from './Layer.stories';

<CommonHeader />

<Meta of={LayerStories} />

## Layer

Groups child spaces and places them all at a certain `zIndex`.

Spaces only interact with each other when they are in the same `zIndex`.

Spaces in a higher `zIndex` overlap spaces in a lower `zIndex`.

```tsx
<ViewPort>
	<Layer zIndex={2}>
		<LeftResizable size={200}>...</LeftResizable>
	</Layer>
	<Layer zIndex={1}>
		<Fill>...</Fill>
	</Layer>
</ViewPort>
```

In the example above, the `<Fill />` space size is not affected by the `<LeftResizable />` space because
they have been placed at different levels within the `<ViewPort />`. The `<LeftResizable />` space also
overlaps the `<Fill />` space because it is in a higher layer.

An alternate way of specifying the layer is by specifying a zIndex directly on the spaces:

```tsx
<ViewPort>
	<LeftResizable size={200} zIndex={2}>...</LeftResizable>
	<Fill zIndex={1}>...</Fill>
</ViewPort>
```

This is preferable when moving spaces between different layers without causing a remount on children
inside the space.

### Positioned spaces in different layers

<Canvas of={LayerStories.Default} />

### Properties

<LayerStories.Properties />
